/* Includes */

@import url("../lib/colorPicker.css");
@import url("base.css");

/* General Page Styles */

html {
  height: 100%;
  overflow-y: scroll;
}

body {
  width: 820px;
  min-height: 100%;
  margin: auto;
  border-right: 1px #ccc solid;
  border-left: 1px #ccc solid;
  background: white;
}

hr {
  border-bottom: 1px #999 solid;
  margin-bottom: 0px;
  margin-top: 20px;
}

img {
  vertical-align: middle;
  position: relative;
  top: -2px;
}

input[type=checkbox], input[type=radio] {
  position: relative;
  top: 1px;
}

input[type=text] {
  border: 1px #ccc solid;
}

input[type=range] {
  position: relative;
  top: 7px;
  min-width: 100px;
}

/* Header */

h1 {
  margin-top: 0px;
  color: #F8F8FF;
  background-image: -webkit-gradient(linear, left top, left bottom, from(#BBBBBB), to(gray));
  border-radius: 0px 0px 10px 10px;
  padding: 5px 10px 10px 10px;
  text-shadow: rgba(0, 0, 0, 0.3) 0px -1px 1px;
  font-size: 150%;
  text-align: center;
  -webkit-box-shadow: rgba(0, 0, 0, 0.15) 0px 3px 5px;
}

/* Background Shading Screen */

#shader {
  position: absolute;
  top: 0px;
  left: 0px;
  width: 100%;
  overflow: hidden;
  z-index: 1;
  background: #000000;
  opacity: 0;
}

/* Page Table Styles */

.page_record td {
  padding: 3px 20px;
}

.page_record:last-child td, .empty td {
  padding-bottom: 10px;
  border-bottom: 1px #999 solid;
}

/* Normal Per-Page Controls */

.page_controls>span {
  color: #607fbf;
  cursor: pointer;
  margin-top: 10px;
  margin-left: 20px;
  margin-right: 20px;
  width: auto;
  text-align: right;
}

.page_controls>span:hover {
  text-shadow: #849ccb 0px -1px 0px;
}

.last_check, .last_check:hover {
  color: #8EA7D7 !important;
  cursor: default !important;
  text-shadow: none !important;
  white-space: nowrap;
}

.advanced_toggle label, .check_now {
  cursor: pointer;
}

/* Advanced Per-Page Controls */

.advanced_toggle input {
  position: relative;
  top: 2px;
}

.toggled {
  position: relative;
  left: -1px;
  border: 1px solid #9eafd1;
  border-radius: 5px 5px 0px 0px;
  border-bottom: 1px transparent solid;
  margin-right: -2px;
  z-index: 1;
}

.main_table tr:nth-child(odd) .toggled {
  border-bottom-color: white;
}

.main_table tr:nth-child(even) .toggled {
  border-bottom-color: #f4f4f4;
}

.advanced_controls {
  position: relative;
  top: -1px;
  left: -1px;
  border: 1px solid #9eafd1;
  margin-left: 20px;
  padding: 10px;
  padding-left: 20px;
  display: none;
  border-radius: 0px 5px 5px 5px;
}

.advanced_controls div {
  margin-top: 5px;
}

.advanced_controls span, .advanced_controls input, .advanced_controls select {
  -webkit-transition: color 0.2s linear;
  -webkit-transition: background-color 0.2s linear;
}

.advanced_controls .enabled {
  color: #849ccb;
}

.advanced_controls .disabled {
  color: #999999;
}

.advanced_controls input[type=button] {
  height: 1.6em;
  position: relative;
  top: 1px;
}

.page_interval input[type=text] {
  width: 3em;
  text-align: center;
}

.mode_string {
  min-width: 270px;
  padding-left: 1px;
  height: 1em;
  border: 1px #bbb solid;
}

.invalid {
  background: #fcc;
}

.page_info {
  margin-bottom: 10px;
}

.page_info input {
  position: relative;
  top: -2px;
}

.page_info input[type=text] {
  width: 600px;
  height: 1.25em;
}

/* Forms */

#export_form, #import_form, #test_result_form {
  display: none;
  position: fixed;
  top: 20%;
  left: auto;
  border: 1px gray solid;
  background: white;
  padding: 20px;
  border-radius: 10px;
  width: 738px;
  z-index: 2;
}

#export_form textarea, #import_form textarea, #test_result_form textarea {
  display: block;
  width: 100%;
  min-height: 200px;
  margin-top: 10px;
  white-space: nowrap;
  resize: none;
}

#export_form button, #import_form button, #test_result_form button {
  display: block;
  margin-top: 10px;
  margin-left: 20px;
  margin-right: -7px;
  margin-bottom: -6px;
  float: right;
}

#new_sound_form {
  display: none;
  position: fixed;
  border: 1px gray solid;
  background: white;
  padding: 20px;
  border-radius: 10px;
  width: 200px;
  z-index: 2;
}

#new_sound_form label {
  xdisplay: block;
}

#new_sound_form input {
  display: block;
  width: 100%;
}

#new_sound_buttons {
  margin-top: 10px;
  margin-left: 40px;
}

/* Basic Global Options */

#basic_options {
  border-bottom: 1px lightgray solid;
}

#basic_options td {
  color: #8EA7D7;
  width: auto;
  padding-top: 1em;
  padding-bottom: 1em;
  padding: auto;
  text-align: center;
}

#basic_interval input {
  width: 3em;
  text-align: center;
}

#basic_interval .range_value_label {
  width: 200px;
  display: inline-block;
  position: absolute;
  text-align: center;
  z-index: -1;
  line-height: 40%;
  padding-left: 10px;
}

/* Advanced Global Options */

#advanced_options {
  color: #8EA7D7;
  display: none;
}

#advanced_options p, #advanced_options div {
  border-bottom: 1px lightgray solid;
  margin: 0;
  padding: 0.5em 0 0.5em 0;
}

#advanced_options p {
  padding-left: 200px;
}

#advanced_options p>span {
  min-width: 250px;
  display: inline-block;
}

#notifications_timeout input, #interval input {
  width: 3em;
  text-align: center;
}

#actions {
  margin: auto;
  width: 100%;
  text-align: center;
  margin-top: 1em;
}

#actions>span {
  color: #607fbf;
  cursor: pointer;
  width: 270px;
  display: inline-block;
}

#actions span:hover {
  text-shadow: #849ccb 0px -1px 0px;
}

.colorPicker-picker {
  display: inline-block;
  position: relative;
  top: 2px;
}

/* Global Options Switch */

#options_switch {
  color: #607fbf;
  cursor: pointer;
  text-align: center;
  display: block;
  margin-top: 2em;
  padding-bottom: 1em;
}

#options_switch:hover {
  text-shadow: #849ccb 0px -1px 0px;
}
